<template>
    <div>
        <div id="menuTreeVa" style="width: 180px">
            <el-input
                placeholder="输入关键字进行过滤"
                clearable
                @clear="initBtAccountMenu_clear"
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree"
                :data="dataMenu"
                :props="defaultMenuProps"
                default-expand-all
                :filter-node-method="filterMenuNode"
                ref="tree"
                show-checkbox
                node-key="menuId"
                :check-strictly="true"
                @check-change="handleCheckChange"
    	        @node-click="nodeClick"
                >
            </el-tree>
        </div>
        <div id="pageListVa" style="margin-left: 200px;">
            <div class="addBtAccountMenu">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="initBtAccountMenu_clear"
                            clearable
                            style="margin-right: 8px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入组件名称"
                            class="initBtAccountMenu"
                            v-model="MenuPage.componentName"
                            @keydown.enter.native="initBtAccountMenuQuery">
                    </el-input>
                    <el-input
                            @clear="initBtAccountMenu_clear"
                            clearable
                            style="margin-right: 8px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入菜单名称"
                            class="initBtAccountMenu"
                            v-model="MenuPage.menuName"
                            @keydown.enter.native="initBtAccountMenuQuery">
                    </el-input>
                    <el-input
                            @clear="initBtAccountMenu_clear"
                            clearable
                            style="margin-right: 8px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入菜单图标"
                            class="initBtAccountMenu"
                            v-model="MenuPage.menuIcon"
                            @keydown.enter.native="initBtAccountMenuQuery">
                    </el-input>
                    <el-input
                            @clear="initBtAccountMenu_clear"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入菜单路径"
                            class="initBtAccountMenu"
                            v-model="MenuPage.directoryPath"
                            @keydown.enter.native="initBtAccountMenuQuery">
                    </el-input>
                    <el-select style="margin-left: 8px;width:50%" v-model="MenuPage.enabled" @clear="initBtAccountMenu_clear" clearable placeholder="请选择">
                        <el-option
                        v-for="item in enableds"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initBtAccountMenuQuery">查询</el-button>
                </div>
                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                    </el-button>
                    <el-button
                            type="primary"
                            @click="insertBtAccountMenu"><i class="el-icon-add-location"></i><span>新增菜单</span>
                    </el-button>
                </div>
            </div>
        <div>
            <el-table
                    :data="BtAccountMenuList"
                    stripe
                    border
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="菜单名称"
                        width="250">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>菜单名称: {{ scope.row.menuName }}</p>
                            <p>组件名称: {{ scope.row.componentName }}</p>
                            <p>菜单图标: {{ scope.row.menuIcon }}</p>
                            <p>菜单路径: {{ scope.row.directoryPath }}</p>
                            <p>菜单状态:
                                <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                                <el-tag type="danger" v-else>未启用</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.menuName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="组件名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.componentName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="菜单状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                        <el-tag type="danger" v-else>未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="菜单图标"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.menuIcon }}</span>
                        <i style="color: #898cff;margin-right: 5px" :class="scope.row.menuIcon"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        label="菜单路径"
                        width="300">
                    <template slot-scope="scope">
                        <span>{{ scope.row.directoryPath }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                @click="updateBtAccountMenu(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button
                                type="danger"
                                @click="deleteBtAccountMenu(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteBatchBtAccountMenu" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete"></i>批量删除</el-button>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        </div>
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <div>
                    <el-form :model="BtAccountMenu" :rules="rules" ref="BtAccountMenuForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="菜单名称:" prop="menuName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="BtAccountMenu.menuName"
                                              placeholder="请输入菜单名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="菜单路径:" prop="directoryPath">
                                    <el-input style="width: 450px" prefix-icon="el-icon-edit" v-model="BtAccountMenu.directoryPath"
                                              placeholder="请输入菜单路径"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="组件名称:" prop="componentName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="BtAccountMenu.componentName"
                                              placeholder="请输入组件名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="菜单状态:" prop="enabled">
                                    <el-switch
                                            v-model="BtAccountMenu.enabled"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-text="启用"
                                            :active-value=1
                                            inactive-text="禁用"
                                            :inactive-value=2
                                            >
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="上级菜单:" prop="parentId" style="margin-left: 8px;">
                                    <tree-select style="margin-left: 90px;width: 815px;"
                                    :options="BtAccountMenuInfoTreeList"
                                    placeholder="请选择上一级菜单"
                                    v-model="BtAccountMenu.parentId"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="菜单图标:" prop="menuIcon">
                                    <el-input style="width: 250px;"
                                    v-model="BtAccountMenu.menuIcon"
                                    placeholder="请设置菜单图标">
                                    </el-input>
                                    <!-- 图标预览 -->
                                    <i style="color: #898cff;margin-right: 5px" :class="BtAccountMenu.menuIcon"></i>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="菜单排序:" prop="menuSort">
                                    <el-input-number style="width: 450px"
                                    :min="1"
                                    v-model="BtAccountMenu.menuSort"
                                    label="请设置菜单排序">
                                    </el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-button style="position: absolute;display: block;"
                        type="text"
                        @click="iconImages"><i class="el-icon-notebook-1"></i><span>图标库</span>
                </el-button>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertBtAccountMenuRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name:"BtAccountMenu",
    components: { TreeSelect },
    data(){
        return{
            loading: false,
            filterText: '',
            // 查询目录属性设置
            defaultMenuProps:{
                children: 'children',
                label: 'menuName'
            },
            // 初始化菜单目录
            dataMenu:[],
            // 封装查询条件
            MenuPage:{
                menuName:'',
                directoryPath:'',
                enabled:0,
                componentName:'',
                menuId:'',
                menuIcon:'',
                pageNum: 1,
                pageSize: 10
            },
            enableds:[
            {
                value: 0,
                label: '请选择'
            },{
                value: 1,
                label: '已启用'
            },
            {
                value: 2,
                label: '未启用'
            }],
            // 初始化列表
            BtAccountMenuList:[],
            total: 0,
            // 初始化多选复选框
            multipleSelection:[],
            // 编辑新增框数据传输
            BtAccountMenu:{
                menuName:'',
                componentName:'',
                enabled:1,
                directoryPath:'',
                menuId:'init_level',
                menuIcon:'',
                menuSort:'',
                parentId:'init_level'
            },
            // 弹框初始化设置
            title: '',
            dialogVisible: false,
            // 校验规则
            rules: {
                menuName:[{required:true,message:'请输入菜单名称',trigger:'blur'}],
                componentName:[{required: true, message: '请输入组件名称', trigger: 'blur'}],
                menuIcon:[{required: true, message: '请设置菜单图标', trigger: 'blur'}]
            },
            BtAccountMenuInfoTreeList:[]
        }
    },
    mounted(){
        // 初始化菜单列表
        this.initBtAccountMenuQuery();
        // 初始化菜单目录
        this.selectBtAccountMenuInfoTreeList();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods:{
        // 重置查询条件
        resetCondition(){
            this.$refs.tree.setCheckedNodes([]);
            this.filterText = '';
            this.MenuPage.menuId = '';
            this.MenuPage.menuName = '';
            this.MenuPage.componentName = '';
            this.MenuPage.enabled = 0;
            this.MenuPage.directoryPath = '';
            this.MenuPage.menuIcon = '';
            this.initBtAccountMenuQuery();
        },
        initBtAccountMenu_clear(){
          this.resetCondition();
        },
        // 菜单目录选择
        handleCheckChange(data, checked, node){
            if(checked == true){
                this.filterText = data.menuName;
                this.MenuPage.menuId = data.menuId;
                this.$refs.tree.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.filterText = data.menuName;
            this.MenuPage.menuId = data.menuId;
            this.$refs.tree.setCheckedNodes([data]);
        },
        // 菜单目录节点过滤
        filterMenuNode(value,dataMenu){
            if (!value) return true;
            return dataMenu.menuName.indexOf(value) !== -1;
        },
        // 获取菜单目录
        selectBtAccountMenuInfoTreeList(){
            this.getRequest("/account/BtAccountMenu/select/BtAccountMenuInfoTreeList").then(resp => {
                if (resp) {
                    this.dataMenu = resp.data;
                }
            });
        },
        // 初始化菜单列表
        initBtAccountMenuQuery(){
            this.loading = true;
            this.postRequest("/account/BtAccountMenu/query/BtAccountMenuPageList",this.MenuPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.BtAccountMenuList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 编辑菜单信息
        updateBtAccountMenu(data){
            this.initBtAccountMenuQuery();
            this.title = '编辑菜单信息';
            this.BtAccountMenu = data;
            this.dialogVisible = true;
            this.queryBtAccountMenuInfoTreeList();
        },
        // 添加菜单信息
        insertBtAccountMenu(){
            this.initBtAccountMenu();
            this.title = "添加菜单信息";
            this.dialogVisible = true;
            this.queryBtAccountMenuInfoTreeList();
        },
        insertBtAccountMenuRequest(){
            if (this.BtAccountMenu.menuId) {
                    this.$refs['BtAccountMenuForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/account/BtAccountMenu/update/BtAccountMenuInfo", this.BtAccountMenu).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initBtAccountMenuQuery();
                                    this.initBtAccountMenu();
                                    this.selectBtAccountMenuInfoTreeList();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['BtAccountMenuForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/account/BtAccountMenu/insert/BtAccountMenuInfo", this.BtAccountMenu).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initBtAccountMenuQuery();
                                // 初始化弹框值
                                this.initBtAccountMenu();
                                this.selectBtAccountMenuInfoTreeList();
                            }
                        })
                    }
                });
            }
        },
        // 获取菜单目录
        queryBtAccountMenuInfoTreeList(){
            this.getRequest("/account/BtAccountMenu/select/BtAccountMenuInfoTreeList").then(resp => {
                if (resp) {
                    let result = [];
                    let data = resp.data;
                    const children = this.getTree(data);
                    let obj = {}
                    obj.label = '所属菜单'
                    obj.id = 'init_level'
                    obj.children = children
                    result.push(obj)
                    this.BtAccountMenuInfoTreeList = result;
                }
            });
        },
        // 构建树形数据结构
        getTree (tree) {
            let arr = [];
            if (tree) {
            tree.forEach(item => {
                let obj = {};
                obj.label = item.menuName;
                obj.id = item.menuId;
                if(item.children&&item.children.length!==0) {
                   obj.children = this.getTree(item.children);
                }
                arr.push(obj);
            });
        }
            return arr;
        },
        // 初始化菜单对象
        initBtAccountMenu(){
            this.BtAccountMenu.menuName='',
            this.BtAccountMenu.directoryPath='',
            this.BtAccountMenu.enabled=1,
            this.BtAccountMenu.componentName='',
            this.BtAccountMenu.menuId='',
            this.BtAccountMenu.parentId='init_level',
            this.BtAccountMenu.menuIcon=''
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 批量删除账户菜单信息
        deleteBatchBtAccountMenu(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let menuIds = '?';
                    this.multipleSelection.forEach(item=>{
                        menuIds += 'menuIds='+item.menuId+'&';
                    })
                    this.deleteRequest("/account/BtAccountMenu/delete/BatchBtAccountMenuInfoByMenuIds"+ menuIds).then(resp=>{
                        if (resp){
                            this.initBtAccountMenuQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        // 删除账户菜单信息
        deleteBtAccountMenu(data){
            this.$confirm('此操作将永久删除【'+data.menuName+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/account/BtAccountMenu/delete/BtAccountMenuInfoByMenuId?menuId='+data.menuId).then(resp=>{
                        if (resp){
                            this.initBtAccountMenuQuery();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        iconImages(){
            window.open("https://fontawesome.dashgame.com/", '_blank');
        },
        // 分页
        sizeChange(currentSize) {
            this.MenuPage.pageSize = currentSize;
            this.initBtAccountMenuQuery();
        },
        currentChange(currentPage) {
            this.MenuPage.pageNum = currentPage;
            this.initBtAccountMenuQuery();
        }
    }
}
</script>

<style>
    .insertBtAccountMenu{
        width: 300px;margin-right: 8px;
    }
    .addBtAccountMenu{
        margin-bottom: 10px;
    }
    #menuTreeVa{
        position:absolute;
    }
    #menuTreeVa #pageListVa{
        position:relative;
    }
</style>
